<template>
  <view class="gift-purchase">
    <view class="header">
      <view><uni-status-bar></uni-status-bar></view>

      <view class="search-box flex-cn">
        <view class="navbar-left flex-cn" style="flex: 1" @click="backHome">
          <view style="width: 100rpx; color: #fff; text-align: center"
            class="qh-rt-single qh-rt-zuo-zuo navbar-back-icon">
          </view>
        </view>

        <view style="
            height: 80rpx;
            line-height: 80rpx;
            font-size: 36rpx;
            font-family: '.PingFang SC, PingFang SC';
            display: flex;
            justify-content: center;
            align-content: center;
            flex: 1;
            color: #fff;
            font-weight: 600;
          ">
          礼盒专区
        </view>
        <view style="width: 320rpx; flex: 1"></view>
      </view>
    </view>

    <view class="offline-center benner_footer">
      <!-- <view class="grid-container">
        <view class="grid-item" v-for="(item, index) in foodCategories" :key="index" @tap="handleItemClick(item)">
          <image :src="item.headerImg" mode="aspectFill" />
        </view>
      </view> -->

      <view class="giftbox-box">
        <view class="giftbox-category-list">
          <view v-for="(category, index) in categories" :key="category.id" class="giftbox-category-item"
            :class="{ 'giftbox-last': index === categories.length - 1 }" @tap="handleItemClick(category, index)">
            <image :src="category.headerImg" :mode="'aspectFill'" class="giftbox-category-img" />
            <!-- <view class="giftbox-category-text">
              <text class="giftbox-title">{{ category.title }}</text>
              <text class="giftbox-subtitle">{{ category.englishTitle }}</text>
            </view> -->
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "礼盒专区",
      isScrolled: false,
      isTop: true,
      foodCategories: [
        {
          id: 883,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735559085677287ad5633e.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735195983676cfd4f66bc8.png',
          nameCn: '酒水饮料'
        },
        {
          id: 888,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17355594376772890d46fbf.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345902326763bf1845981.png',
          nameCn: '滋补品'
        },
        {
          id: 884,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735559175677288072ed77.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900906763be8a200ba.png',
          nameCn: '零食糕点'
        },
        {
          id: 873,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735558906677286fa26624.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734331249675fcb712bf51.png',
          nameCn: '坚果'
        },
        {
          id: 881,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173555901167728763bc507.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900406763be58cc093.png',
          nameCn: '基地直发水果'
        },
        {
          id: 880,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173555953967728973489f5.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900166763be40d0c9b.png',
          nameCn: '粮油调味'
        },
        {
          id: 874,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17355595796772899b4e2d6.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897146763bd1275055.png',
          nameCn: '海鲜礼盒'
        },
        {
          id: 876,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735559632677289d076e4c.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897156763bd1362aa8.png',
          nameCn: '南北干货'
        },
        {
          id: 885,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173555988167728ac9cd275.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345901126763bea07c196.png',
          nameCn: '鲜花饰品'
        },
        {
          id: 882,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173556006767728b83133ee.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900556763be67cc69b.png',
          nameCn: '牛奶奶粉'
        },
        {
          id: 887,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173556014367728bcf89e59.png',
          nameCn: '综合礼盒DIY',
          image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734335054675fda4ea379d.png",
        },
        {
          id: 877,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173556034567728c9929165.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897136763bd11dc009.png',
          nameCn: '牛羊生鲜'
        },
        {
          id: 878,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173556045767728d09748b9.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345899546763be0271c35.png',
          nameCn: '厚切牛排'
        },
        {
          id: 879,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173556047667728d1cc156e.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734330823675fc9c7df079.png',
          nameCn: '鸡鸭禽蛋'
        },
        
        {
          id: 886,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173556053867728d5a83b7c.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345901396763bebb88f99.png',
          nameCn: '预制宴席'
        },
        {
          id: 889,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173556056567728d759174b.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345902046763befc32b9a.png',
          nameCn: '熟食腊味'
        },
        {
          id: 875,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173556043867728cf671011.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897146763bd122d822.png',
          nameCn: '五谷杂粮'
        },

        {
          id: 897,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173580168267763b5267fd9.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173580168267763b5267fd9.png',
          nameCn: '农副产品'
        },
   
       

      ],
      categories: [
      {
          id: 883,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367497026784b28623291.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1735195983676cfd4f66bc8.png',
          nameCn: '酒水饮料'
        },
        {
          id: 888,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367498056784b2edd4af3.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345902326763bf1845981.png',
          nameCn: '滋补品'
        },
        {
          id: 884,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367498586784b322870c7.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900906763be8a200ba.png',
          nameCn: '零食糕点'
        },
        {
          id: 873,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367502676784b4bb07e61.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734331249675fcb712bf51.png',
          nameCn: '坚果'
        },
        {
          id: 881,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367503046784b4e07fa56.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900406763be58cc093.png',
          nameCn: '基地直发水果'
        },
        {
          id: 880,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367503326784b4fcc4ff4.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900166763be40d0c9b.png',
          nameCn: '粮油调味'
        },
        {
          id: 874,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367503636784b51b65d1e.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897146763bd1275055.png',
          nameCn: '海鲜礼盒'
        },
        {
          id: 876,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367515216784b9a130fa3.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897156763bd1362aa8.png',
          nameCn: '南北干货'
        },
        {
          id: 885,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367504246784b558b3699.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345901126763bea07c196.png',
          nameCn: '鲜花饰品'
        },
        {
          id: 882,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367504636784b57fa4cca.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345900556763be67cc69b.png',
          nameCn: '牛奶奶粉'
        },
        {
          id: 887,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367514206784b93cca8bd.png',
          image: "https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734335054675fda4ea379d.png",
          nameCn: '综合礼盒DIY',
        },
        {
          id: 877,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367516806784ba40b211c.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897136763bd11dc009.png',
          nameCn: '牛羊生鲜'
        },
        {
          id: 878,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367504896784b59912bea.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345899546763be0271c35.png',
          nameCn: '厚切牛排'
        },
        {
          id: 879,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367505206784b5b873676.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/1734330823675fc9c7df079.png',
          nameCn: '鸡鸭禽蛋'
        },
        
        {
          id: 886,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367505526784b5d82e872.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345901396763bebb88f99.png',
          nameCn: '预制宴席'
        },
        {
          id: 889,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367505996784b60740925.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345902046763befc32b9a.png',
          nameCn: '熟食腊味'
        },
        {
          id: 875,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367512576784b899901f8.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17345897146763bd122d822.png',
          nameCn: '五谷杂粮'
        },

        {
          id: 897,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367512886784b8b820dd1.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173580168267763b5267fd9.png',
          nameCn: '农副产品'
        },
        {
          id: 893,
          headerImg: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17367513146784b8d283a52.png',
          image: 'https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17355664086772a448bfd39.png',
          nameCn: '家电专场'
        },
      ],
    };
  },
  computed: {
    headerStyle() {
      return `background-image: ${this.isTop
          ? 'url("https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/17337434366756d34caea20.png")'
          : "none"
        }`;
    },
    styleColor() {
      return `color: ${this.isTop ? "#fff" : "#000 "}`;
    },
  },
  methods: {
    backHome() {
      uni.navigateBack();
    },
    onPageScroll(e) {
      this.isScrolled = e.scrollTop > 0;
      this.isTop = e.scrollTop === 0;
    },
    handleItemClick(item) {
      // 准备要传递的数据
      const categoryData = {
        id: item.id,
        title: item.nameCn,
        headerImg: item.image // 如果需要传递头部图片
      };

      // 将对象转换为URL安全的���符串
      const encodedData = encodeURIComponent(JSON.stringify(categoryData));

      // 跳转到gift_box_details页面
      uni.navigateTo({
        url: `/pages/mer/tabbar/specialDetails/gift_box_details?categoryData=${encodedData}`
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.header-title {
  font-weight: 600;
  color: #fff;
}

.giftbox-box {
  padding: 20rpx;

}

.giftbox-gift-section {
  max-width: 750rpx;
  margin: 0 auto;
  padding: 20rpx;
  background-color: #fff;
}

.giftbox-section-title {
  margin-bottom: 20rpx;
}

.giftbox-title-img {
  width: 100%;
  height: 80rpx;
  /* 根据实际图片调整高度 */
}

.giftbox-category-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.giftbox-category-item {
  position: relative;
  height: 244rpx;
  overflow: hidden; 
  border-radius: 16rpx;
}

.giftbox-category-img {
  width: 100%;
  height: 100%;
}

.giftbox-category-text {
  position: absolute;
  left: 40rpx;
  bottom: 40rpx;
  color: white;
}

.giftbox-category-text .giftbox-title {
  font-size: 48rpx;
  display: block;
}

.giftbox-category-text .giftbox-subtitle {
  font-size: 32rpx;
  display: block;
  margin-top: 10rpx;
}

.giftbox-category-item.giftbox-last {
  height: 244rpx;
}

.giftbox-view-more {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  color: #666;
}
</style>


<style lang="scss" scoped>
.grid-container {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
  justify-content: space-between;
}

.grid-item {
  width: 340rpx;
  height: 244rpx;
  margin-bottom: 20rpx;
  position: relative;
  overflow: hidden;
  //   border-radius: 8rpx;

  image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .text-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 20rpx;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);

    .chinese {
      display: block;
      color: #fff;
      font-size: 32rpx;
      font-weight: bold;
    }

    .english {
      display: block;
      color: #fff;
      font-size: 24rpx;
      margin-top: 4rpx;
    }
  }
}
</style>



<style lang="scss" scoped>
.offline-center {
  overflow-y: auto;
  padding-bottom: env(safe-area-inset-bottom);
}

.gift-purchase {
  height: 100vh;
  overflow-y: auto;
  width: 100%;
  /* background-color: #F0F2EE; */
  padding-bottom: 24rpx;


}

.header {
  background-color: #fff;
  position: sticky;
  top: 0px;
  z-index: 99;
  background-color: #f5f5f5;
  background-image: url('https://safood-1317438654.cos.ap-guangzhou.myqcloud.com/tempImage/173494563867692b66b028b.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
</style>